<template>
  <a-modal
    @cancel="cancel"
    centered
    v-model="visible"
    title="入库订单"
    width="85%"
  >
    <template slot="footer">
      <a-button
        @click="cancel"
        style="background: #d7d7d7; color: #fff; border: none"
        >关闭</a-button
      >
      <a-button
        v-if="tabKeys === '60'"
        :loading="loading"
        type="primary"
        @click="handleOk"
        >提交</a-button
      >
      <a-button
        v-if="this.dto.applyState === '100' && viewBtnFlag === 'finance'"
        :loading="loading"
        type="primary"
        @click="sendBill"
        >发送账单</a-button
      >
      <a-button
        v-if="this.dto.applyState === '70'"
        :loading="loading"
        type="primary"
        @click="receptionUpdate"
        >发送至客服</a-button
      >
    </template>
    <h3>卸柜信息</h3>
    <a-table
      size="small"
      bordered
      :data-source="uBTabData"
      :pagination="false"
      :scroll="{ x: 1280, y: 250 }"
    >
      <a-table-column
        v-if="
          this.dto.distributionTypeId == '10322' ||
          this.dto.distributionTypeId == '10323'
        "
        key="cargotankNumber"
        data-index="cargotankNumber"
        align="center"
        width="5%"
      >
        <span slot="title"> 柜号</span>
        <template slot-scope="text, record">
          {{ record.cargotankNumber }}
        </template>
      </a-table-column>
      <a-table-column
        v-if="
          this.dto.distributionTypeId == '10322' ||
          this.dto.distributionTypeId == '10323'
        "
        key="cargotankModel"
        data-index="cargotankModel"
        align="center"
        width="5%"
      >
        <span slot="title"> 柜型</span>
        <template slot-scope="text, record">
          {{ record.cargotankModel }}
        </template>
      </a-table-column>
      <a-table-column
        key="actualTrayNumber"
        data-index="actualTrayNumber"
        align="center"
        width="7%"
      >
        <span slot="title"> 接收托盘数量</span>
        <template slot-scope="text, record">
          <div style="display: flex; align-items: center">
            <a-input-number
              :disabled="record.isEditActual"
              style="flex: 1"
              v-model="record.actualTrayNumber"
            />
            <a-button
              style="margin-left: 10px"
              v-if="record.isEditActual"
              type="primary"
              @click="
                () => {
                  record.isEditActual = false;
                }
              "
              >编辑</a-button
            >
            <span v-else>
              <a-icon
                type="check-circle"
                theme="filled"
                style="color: #3eae7c; font-size: 22px; margin: 0 5px"
                @click="saveUb(record, 'isEditActual')"
              />
              <a-icon
                @click="
                  () => {
                    record.isEditActual = true;
                  }
                "
                type="close-circle"
                style="color: #3eae7c; font-size: 22px"
              />
            </span>
          </div>
        </template>
      </a-table-column>
      <a-table-column
        key="playTrayNumber"
        data-index="playTrayNumber"
        align="center"
        width="7%"
      >
        <span slot="title"> 实际打托数量</span>
        <template slot-scope="text, record">
          <div style="display: flex; align-items: center">
            <a-input-number
              :disabled="record.isPlayTrayNumber"
              style="flex: 1"
              v-model="record.playTrayNumber"
            />
            <a-button
              style="margin-left: 10px"
              v-if="record.isPlayTrayNumber"
              type="primary"
              @click="
                () => {
                  record.isPlayTrayNumber = false;
                }
              "
              >编辑</a-button
            >
            <span v-else>
              <a-icon
                type="check-circle"
                theme="filled"
                style="color: #3eae7c; font-size: 22px; margin: 0 5px"
                @click="saveUb(record, 'isPlayTrayNumber')"
              />
              <a-icon
                @click="
                  () => {
                    record.isPlayTrayNumber = true;
                  }
                "
                type="close-circle"
                style="color: #3eae7c; font-size: 22px"
              />
            </span>
          </div>
        </template>
      </a-table-column>
      <a-table-column
        v-if="
          this.dto.distributionTypeId == '10322' ||
          this.dto.distributionTypeId == '10323'
        "
        key="cabinetTime"
        data-index="cabinetTime"
        align="center"
        width="10%"
      >
        <span slot="title"> 要求还柜时间</span>
        <template slot-scope="text, record">
          <div style="display: flex; align-items: center">
            <a-date-picker
              :disabled="record.isCabinetTime"
              style="flex: 1"
              v-model="record.cabinetTime"
            />
            <a-button
              style="margin-left: 10px"
              v-if="record.isCabinetTime"
              type="primary"
              @click="
                () => {
                  record.isCabinetTime = false;
                }
              "
              >编辑</a-button
            >
            <span v-else>
              <a-icon
                type="check-circle"
                theme="filled"
                style="color: #3eae7c; font-size: 22px; margin: 0 5px"
                @click="saveUb(record, 'isCabinetTime')"
              />
              <a-icon
                @click="
                  () => {
                    record.isCabinetTime = true;
                  }
                "
                type="close-circle"
                style="color: #3eae7c; font-size: 22px"
              />
            </span>
          </div>
        </template>
      </a-table-column>
      <a-table-column
        v-if="
          this.dto.distributionTypeId == '10322' ||
          this.dto.distributionTypeId == '10323'
        "
        key="actualCabinetTime"
        data-index="actualCabinetTime"
        align="center"
        width="10%"
      >
        <span slot="title"> 实际还柜时间</span>
        <template slot-scope="text, record">
          <div style="display: flex; align-items: center">
            <a-date-picker
              :disabled="record.isActualTrayNumber"
              style="flex: 1"
              v-model="record.actualCabinetTime"
            />
            <a-button
              style="margin-left: 10px"
              v-if="record.isActualTrayNumber"
              type="primary"
              @click="
                () => {
                  record.isActualTrayNumber = false;
                }
              "
              >编辑</a-button
            >
            <span v-else>
              <a-icon
                type="check-circle"
                theme="filled"
                style="color: #3eae7c; font-size: 22px; margin: 0 5px"
                @click="saveUb(record, 'isActualTrayNumber')"
              />
              <a-icon
                @click="
                  () => {
                    record.isActualTrayNumber = true;
                  }
                "
                type="close-circle"
                style="color: #3eae7c; font-size: 22px"
              />
            </span>
          </div>
        </template>
      </a-table-column>
      <a-table-column
        key="auditRemark"
        data-index="auditRemark"
        align="center"
        width="15%"
      >
        <span slot="title"> 备注</span>
        <template slot-scope="text, record">
          <div style="display: flex; align-items: center">
            <a-input
              :disabled="record.isRemarks"
              style="flex: 1"
              v-model="record.auditRemark"
            />
            <a-button
              style="margin-left: 10px"
              v-if="record.isRemarks"
              type="primary"
              @click="
                () => {
                  record.isRemarks = false;
                }
              "
              >编辑</a-button
            >
            <span v-else>
              <a-icon
                type="check-circle"
                theme="filled"
                style="color: #3eae7c; font-size: 22px; margin: 0 5px"
                @click="saveUb(record, 'isRemarks')"
              />
              <a-icon
                @click="
                  () => {
                    record.isRemarks = true;
                  }
                "
                type="close-circle"
                style="color: #3eae7c; font-size: 22px"
              />
            </span>
          </div>
        </template>
      </a-table-column>
    </a-table>
    <h3 style="margin-top: 20px">装箱明细</h3>
    <a-form-model
      style="margin-bottom: 10px"
      ref="addForm"
      :rules="addFormRules"
      :model="addFormData"
      layout="inline"
    >
      <a-form-model-item
        style="margin-right: 15px"
        label="入库仓库："
        prop="warehousingId"
      >
        <a-select
          :disabled="modalFlage == 'look' || tabKeys == '20'"
          show-search
          option-filter-prop="children"
          style="width: 200px"
          placeholder="未选择"
          :filter-option="filterOption"
          @change="changeWarehouse"
          v-model="addFormData.warehousingId"
        >
          <a-select-option
            :value="item.warehouseId"
            v-for="item in clientWareHouse"
            :key="item.warehouseId"
            :name="item.titleName"
          >
            {{ item.titleName }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="清点类型：" prop="countingTypeId">
        <a-select
          :disabled="modalFlage == 'look' || tabKeys == '20'"
          ref="warehousing"
          show-search
          option-filter-prop="children"
          placeholder="未选择"
          style="width: 200px"
          :filter-option="filterOption"
          @change="changeCountingType"
          v-model="addFormData.countingTypeId"
        >
          <a-select-option
            defaultValue="全部"
            :value="item.key"
            v-for="item in checkTypes"
            :key="item.key"
            :name="item.title"
          >
            {{ item.title }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
    </a-form-model>
    <!-- 表格 -->
    <a-table
      size="small"
      bordered
      :data-source="dataSource"
      :pagination="false"
      :scroll="{ x: 1280, y: 250 }"
    >
      <!-- 箱子编号 -->
      <a-table-column key="boxNo" data-index="boxNo" align="center" width="4%">
        <span slot="title"> 箱子编号</span>
        <template slot-scope="text, record">
          {{ record.boxNo }}
        </template>
      </a-table-column>
      <!-- 自定义编号 -->
      <a-table-column
        key="customNo"
        data-index="customNo"
        align="center"
        width="5%"
      >
        <span slot="title">自定义编号</span>
        <template slot-scope="text, record">
          <a-input
            :maxLength="128"
            v-if="modalFlage != 'look' && tabKeys != '20'"
            size="small"
            style="width: 6rem"
            v-model="record.customNo"
          />
          <span v-else>{{
            record.customNo === "" || record.customNo === null
              ? "暂无"
              : record.customNo
          }}</span>
        </template>
      </a-table-column>
      <!-- sku信息 -->
      <a-table-column
        key="boxlist"
        class="columns-tab"
        data-index="boxlist"
        align="center"
        width="40%"
      >
        <div slot="title" class="columns">
          <div style="width: 16%">商品名称</div>
          <div style="width: 16%">商品SKU</div>
          <div style="width: 9%">标签</div>
          <div style="width: 12%">预报数量/箱</div>
          <div style="width: 47%">SKU核重 : 长*宽*高（cm）；重量（g）</div>
        </div>
        <!-- 表格 -->
        <template slot-scope="text, record">
          <ul class="pto-list" v-for="item in record.pto" :key="item.key">
            <li style="width: 16%">
              <span>
                {{ item.skuName }}
              </span>
            </li>
            <li style="width: 16%">
              <span>
                {{ item.sku }}
              </span>
            </li>
            <li style="width: 9%">
              <span>
                <a
                  href="javascript:;"
                  style="color: #3e3ee3; border-bottom: 1px solid #3e3ee3"
                  @click="tagDownload(item)"
                  >{{ item.productTag }}</a
                >
              </span>
            </li>
            <li style="width: 12%">
              <span>
                {{ item.singleBoxNumber }}
              </span>
            </li>
            <li
              style="width: 47%; display: flex; justify-content: space-around"
            >
              <div>
                <span> 尺寸： </span>
                <span> {{ item.skuLengthNumber }}* </span>
                <span> {{ item.skuWideNumber }}* </span>
                <span>
                  {{ item.skuHighNumber }}
                </span>
              </div>
              <div>
                重量：
                <span> {{ item.skuCaratNumber }} </span>
              </div>
              <div :class="item.nuclide ? 'nuclide' : 'nonuclide'">
                <span>
                  {{ item.nuclide ? "已核重" : "未核重" }}
                </span>
              </div>
            </li>
          </ul>
        </template>
      </a-table-column>

      <!-- 重量 -->
      <a-table-column
        key="caratNumber"
        data-index="caratNumber"
        align="center"
        width="12%"
      >
        <span slot="title">箱子尺寸/重量(cm/kg)</span>
        <template slot-scope="text, record">
          <div style="text-align: left">
            <div style="margin-bottom: 10px">
              尺寸：
              <span>{{ record.lengthNumber }}*</span>
              <span>{{ record.wideNumber }}*</span>
              <span>{{ record.highNumber }}</span>
            </div>
            <div>
              重量：
              <span>
                {{ record.caratNumber }}
              </span>
            </div>
          </div>
        </template>
      </a-table-column>
      <!-- 预报箱数 -->
      <a-table-column
        key="packingNumber"
        data-index="packingNumber"
        align="center"
        width="6%"
      >
        <span slot="title">预报箱数</span>
        <template slot-scope="text, record">
          {{ record.packingNumber }}
        </template>
      </a-table-column>
      <!-- 实际接收箱数 -->
      <a-table-column
        key="newPackingNumber"
        data-index="newPackingNumber"
        align="center"
        width="7%"
      >
        <span slot="title">实际接收箱数</span>
        <template slot-scope="text, record">
          {{ record.newPackingNumber }}
        </template>
      </a-table-column>
      <!-- 操作 -->
      <a-table-column
        key="action"
        data-index="action"
        align="center"
        width="6%"
      >
        <span slot="title">操作</span>
        <template slot-scope="text, record">
          <a
            href="javascript:;"
            style="color: #3e3ee3; border-bottom: 1px solid #3e3ee3"
            @click="editReceive(record)"
            >编辑接收</a
          >
        </template>
      </a-table-column>
    </a-table>
    <h3 style="margin-top: 20px">入库方式</h3>
    <div class="logistics">
      <!-- <span style="color: red">注：选择物流信息后，头程信息为必填项！</span> -->
      <a-form-model
        ref="ruleForm"
        :model="dto"
        class="logi-form"
        :rules="rules"
      >
        <a-form-model-item label="入库方式" prop="distributionTypeId">
          <a-select
            show-search
            :disabled="modalFlage == 'look'"
            placeholder="未选择"
            style="width: 200px"
            option-filter-prop="children"
            :filter-option="filterOption"
            @change="changeDistributionType"
            v-model="dto.distributionTypeId"
          >
            <a-select-option
              :value="item.key"
              v-for="item in this.express"
              :key="item.key"
              :name="item.title"
            >
              {{ item.title }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <!-- 发出方 -->
        <a-form-model-item label="发出方：" prop="shipperId">
          <a-select
            :disabled="modalFlage == 'look'"
            ref="warehousing"
            show-search
            placeholder="未选择"
            option-filter-prop="children"
            style="width: 200px"
            :filter-option="filterOption"
            @change="changeSendOut"
            v-model="dto.shipperId"
          >
            <a-select-option
              :value="item.key"
              v-for="item in this.sendOuts"
              :key="item.key"
              :name="item.title"
            >
              {{ item.title }}
            </a-select-option>
          </a-select>
        </a-form-model-item>

        <!-- 发货时间 -->
        <a-form-model-item label="发货时间：" prop="startTime">
          <a-date-picker
            :disabled="modalFlage == 'look'"
            style="width: 200px"
            format="YYYY-MM-DD"
            @change="changeExpressTime"
            v-model="dto.startTime"
          />
        </a-form-model-item>
        <!-- 预计到仓时间： -->
        <a-form-model-item prop="whtEndTime" label="预计到仓时间：">
          <a-date-picker
            :disabled="modalFlage == 'look'"
            format="YYYY-MM-DD"
            v-model="dto.whtEndTime"
            style="width: 200px"
            @change="changeEndTime"
          />
        </a-form-model-item>

        <!-- 散货（箱）-快递 -->

        <!-- 发货物流名称 -->
        <a-form-model-item
          label="发货物流名称："
          prop="logisticsId"
          v-if="dto.distributionTypeId == '10319'"
        >
          <a-select
            :disabled="modalFlage == 'look'"
            ref="warehousing"
            show-search
            placeholder="未选择"
            option-filter-prop="children"
            style="width: 200px"
            :filter-option="filterOption"
            @change="changeLogisticsName"
            v-model="dto.logisticsId"
          >
            <a-select-option
              :value="item.key"
              v-for="item in logisSelect"
              :key="item.key"
              :name="item.title"
            >
              {{ item.title }}
            </a-select-option>
          </a-select>
        </a-form-model-item>

        <!-- 发货物流单号 -->
        <a-form-model-item
          label="发货物流单号："
          prop="expressNo"
          v-if="dto.distributionTypeId == '10319'"
        >
          <a-input
            :disabled="modalFlage == 'look'"
            placeholder="发货物流单号"
            :maxLength="128"
            style="width: 200px"
            v-model="dto.expressNo"
          />
        </a-form-model-item>

        <!-- 托盘-仓库安排 -->

        <!-- 托盘数量 -->
        <a-form-model-item
          class="upfile"
          prop="trayNumber"
          label="托盘数量："
          v-if="
            dto.distributionTypeId == '10320' ||
            dto.distributionTypeId == '10321'
          "
        >
          <a-input-number
            :disabled="modalFlage == 'look'"
            placeholder="托盘数量"
            :maxLength="128"
            style="width: 200px"
            v-model="dto.trayNumber"
          />
          <span style="color: #bfbfbf"
            >注：若暂无托盘数量，请填写预估数量，实际将以仓库提/收货托盘数量为准。</span
          >
        </a-form-model-item>

        <a-form-model-item
          label="货运柜号："
          v-if="
            dto.distributionTypeId == '10322' ||
            dto.distributionTypeId == '10323'
          "
          prop="cargotankNumber"
        >
          <a-input
            :disabled="modalFlage == 'look'"
            placeholder="货运柜号"
            :maxLength="128"
            style="width: 200px"
            v-model="dto.cargotankNumber"
          />
        </a-form-model-item>
        <a-form-model-item
          label="货柜型号："
          v-if="
            dto.distributionTypeId == '10322' ||
            dto.distributionTypeId == '10323'
          "
          prop="cargotankModel"
        >
          <a-input
            :disabled="modalFlage == 'look'"
            placeholder="货柜型号"
            :maxLength="128"
            style="width: 200px"
            v-model="dto.cargotankModel"
          />
        </a-form-model-item>
        <a-form-model-item
          label="是否带托盘："
          v-if="
            dto.distributionTypeId == '10322' ||
            dto.distributionTypeId == '10323'
          "
          prop="isTora"
        >
          <a-radio-group v-model="dto.isTora" :disabled="modalFlage == 'look'">
            <a-radio :value="'1'"> 是 </a-radio>
            <a-radio :value="'0'"> 否 </a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item
          label="HBL："
          v-if="
            dto.distributionTypeId == '10322' ||
            dto.distributionTypeId == '10323'
          "
          prop="hbl"
        >
          <a-input
            :disabled="modalFlage == 'look'"
            placeholder="HBL"
            :maxLength="128"
            style="width: 200px"
            v-model="dto.hbl"
          />
        </a-form-model-item>
        <a-form-model-item
          label="MBL："
          v-if="
            dto.distributionTypeId == '10322' ||
            dto.distributionTypeId == '10323'
          "
          prop="mbl"
        >
          <a-input
            :disabled="modalFlage == 'look'"
            placeholder="MBL"
            :maxLength="128"
            style="width: 200px"
            v-model="dto.mbl"
          />
        </a-form-model-item>

        <!-- 要求还柜时间 -->
        <a-form-model-item
          label="要求还柜时间："
          prop="cabinetTime"
          v-if="
            dto.distributionTypeId == '10322' ||
            dto.distributionTypeId == '10323'
          "
        >
          <a-date-picker
            :disabled="modalFlage == 'look'"
            style="width: 200px"
            format="YYYY-MM-DD"
            @change="changeCabinetTime"
            v-model="dto.cabinetTime"
          />
        </a-form-model-item>

        <!-- 文件上传 -->
        <a-form-model-item
          class="upfile"
          prop="trayNumber"
          label="相关文件："
          v-if="
            dto.distributionTypeId == '10320' ||
            dto.distributionTypeId == '10322'
          "
        >
          <span
            v-if="dto.sinceFile != '' && dto.sinceFile != null"
            style="margin-right: 10px"
          >
            <a
              style="
                line-height: 32px;
                color: #2929e0;
                text-decoration: underline;
              "
              :href="dto.sinceFile"
              target="_blank"
              >查看已上传文件</a
            >
            <a-icon
              v-if="modalFlage != 'look'"
              @click="delFlie"
              style="cursor: pointer; color: #e8e8e8; margin-left: 5px"
              type="delete"
              theme="filled"
            />
          </span>
        </a-form-model-item>
      </a-form-model>
    </div>
    <!-- 备注 -->
    <h3 style="margin-top: 20px">备注信息</h3>
    <a-textarea
      :disabled="modalFlage == 'look'"
      :maxLength="256"
      style="width: 90%"
      v-model="dto.remark"
      :auto-size="{ minRows: 2 }"
    />
    <ReceiveModal :getSingleInfo="getSingleInfo" />
  </a-modal>
</template>

<script>
import baseUrl from "@/utils/baseUrl";
import ReceiveModal from "./InStoragesReceiveModal.vue";
import {
  treeTagDictionary,
  sku_select,
  removefile,
  SKU_PDF6030,
} from "@/apis/common";
import {
  nuclideUpdate,
  reception_update,
  unload_ubInfo,
} from "@/apis/system/InOrder/OneInStorages";
import { getByApplyId } from "@/apis/clientSide/OrderManage/Instock";
import { behalf_stock } from "@/apis/system/InOrder/OneInStorages";
import req from "@/utils/req";
import { mapState } from "vuex";
export default {
  components: {
    ReceiveModal,
  },
  props: ["tabData", "getTabData", "typeCount", "IsCheckTypeCount", "tabKeys"],
  created() {
    this.getSkuSelection();
    this.getSelection();
    this.getOutSelection();
    this.getCheckSelection();
    this.getlogiSelection();
  },

  data() {
    return {
      uBTabData: [], //卸柜信息
      addFormRules: {
        warehousingId: [
          {
            required: true,
            message: "入库仓库为必选项",
            trigger: "blur",
          },
        ],
        countingTypeId: [
          {
            required: true,
            message: "入库仓库为必选项",
            trigger: "blur",
          },
        ],
      },
      logisSelect: [], //发货物流名称下拉
      checkTypes: [], //清点类型下拉
      //入库仓库表单
      addFormData: {
        warehousingId: undefined,
        countingTypeId: undefined,
      },

      //发出方拉下
      sendOuts: [],
      uploadExcelFlag: false,
      isRule: false,
      //   定义验证规则
      rules: {
        distributionTypeId: [
          {
            required: true,
            message: "发货物流名称为必选项",
            trigger: "blur",
          },
        ],
        shipperId: [
          {
            required: true,
            message: "发出方为必选项",
            trigger: "blur",
          },
        ],
        logisticsId: [
          {
            required: true,
            message: "入库方式为必选项",
            trigger: "blur",
          },
        ],
        expressNo: [
          {
            required: true,
            message: "发货物流单为必选项",
            trigger: "blur",
          },
        ],
        startTime: [
          {
            required: true,
            message: "发货时间为必选项",
            trigger: "change",
          },
        ],
        whtEndTime: [
          {
            required: true,
            message: "预计到仓时间为必选项",
            trigger: "change",
          },
        ],
        cargotankModel: [
          {
            required: true,
            message: "货柜型号需必填",
            trigger: "blur",
          },
        ],
        cargotankNumber: [
          {
            required: true,
            message: "货运柜号需必填",
            trigger: "blur",
          },
        ],
        hbl: [
          {
            required: true,
            message: "货运柜号需必填",
            trigger: "blur",
          },
        ],
        mbl: [
          {
            required: true,
            message: "货运柜号需必填",
            trigger: "blur",
          },
        ],
        cabinetTime: [
          {
            required: true,
            message: "要求还柜时间需必选",
            trigger: "change",
          },
        ],
      },
      viewBtnFlag: "",
      logiFileList: [],
      //模态框标杆
      modalFlage: "",
      refuseLogin: false,
      loading: false,
      fileList: [],
      baseUrl,
      passFlag: false,
      flightTime: null,
      endTime: null,
      styleBack: {
        border: "1px solid #f00",
        borderRadius: "5px",
      },
      styleYes: {
        border: "1px solid #e8e8e8",
        borderRadius: "5px",
      },
      //sku列表
      skuList: [],
      //快递选择
      express: [],
      //文件时上传请求头
      headers: {
        authorization: "authorization-text",
        ContentType: '["multipart/form-data"]',
        token: sessionStorage.getItem("tk"),
      },
      //到仓配送选择值
      dispatchingValue: [],
      // 到仓配送
      dispatchingOptions: [
        { label: "卡车配送", value: "0" },
        { label: "整柜派送", value: "1" },
        { label: "快递", value: "2" },
        { label: "仓库提货", value: "3" },
      ],
      // 模态框显示
      visible: false,
      //表格数据
      dataSource: [],
      boxlistObj: {
        boxNumber: "",
        createTime: "",
        customNo: "",
        fileUrl: "",
        frozenNumber: "",
        isEidit: true,
        isRemove: "",
        // key: 0,
        locationId: "",
        locationName: "",
        nuclide: true,
        outboundId: "",
        outboundNumber: "",
        singleBoxNumber: 1,
        productTag: "",
        remainingNumber: "",
        sku: "",
        skuId: "",
        skuName: "",
        updateTime: "",
        warehousingId: undefined,
        warehousingName: "",
      },
      dto: {
        id: "",
        boxlist: {
          boxNo: "",
          caratNumber: "",
          highNumber: "",
          inventory: true,
          lengthNumber: "",
          packingNumber: undefined,
          pto: [],
          wideNumber: "",
        },
        cargotankNumber: "",
        createTime: "",
        isTora: "1", //是否带托
        customNo: "",
        distributionType: "",
        fbaName: "",
        //要求还柜时间
        cabinetTime: null,
        fbaNumber: "",
        hbl: "",
        hullNumber: "",
        listingFee: "",
        logisticsId: undefined,
        logisticsName: "",
        mbl: "",
        shipper: "",
        shipperId: undefined,
        distributionTypeId: undefined,
        remark: "",
        startTime: null,
        whtEndTime: null,
        trayFee: "",
        trayNumber: "",
        unloadingFee: "",
        warehousingId: undefined,
        warehousingName: "",
        feeType: "",
        sinceFile: "",
        countingType: "",
        countingTypeId: "",
      },
    };
  },
  mounted() {
    //编辑、详情
    this.$bus.$off("inStoragesData");
    this.$bus.$on("inStoragesData", async (rowData, flag, viewBtnFlag) => {
      this.getSingleInfo(rowData.key, flag);
      this.viewBtnFlag = viewBtnFlag;
    });
  },
  methods: {
    //封装一个查单条详情的方法
    async getSingleInfo(id, flag) {
      let { code, responseBody } = await getByApplyId(id);
      if (code === "200") {
        this.fileList = [];
        responseBody.logisticsId = !responseBody.logisticsId
          ? undefined
          : responseBody.logisticsId;
        this.flightTime = responseBody.deliveryTime;
        this.dataSource = responseBody.boxlist;
        this.addFormData.warehousingId = responseBody.warehousingId;
        this.addFormData.countingTypeId = responseBody.countingTypeId;
        this.dto = responseBody;
        this.dataSource.forEach((item) => {
          item.key = item.id;
        });
        if (responseBody.uinfo) {
          this.uBTabData = [];
          this.uBTabData.push(responseBody.uinfo);
          if (this.uBTabData.length != 0) {
            this.$set(this.uBTabData[0], "isEditActual", true);
            this.$set(this.uBTabData[0], "isPlayTrayNumber", true);
            this.$set(this.uBTabData[0], "isActualTrayNumber", true);
            this.$set(this.uBTabData[0], "isCabinetTime", true);
            this.$set(this.uBTabData[0], "isRemarks", true);
            this.uBTabData[0].cabinetTime = "2020-12-12";
          }
        }

        this.costValue =
          this.dto.feeType === null || this.dto.feeType === ""
            ? []
            : this.dto.feeType.split(",");
        this.modalFlage = flag;
        this.visible = true;
      }
    },
    //编辑接收
    editReceive(record) {
      this.$bus.$emit("showModal", record);
    },

    //即时保存卸柜信息
    async saveUb(record, flag) {
      let res = await unload_ubInfo(record);
      if (res.code == "10000") {
        this.uBTabData[0][flag] = true;
      }
    },
    //费用服务项信息查看
    costServiceInfo() {
      setTimeout(() => {
        if (this.dto.applyState === "100") {
          this.$bus.$emit("reappearance", this.dto, 2, this.dto.id, true);
        } else {
          this.$bus.$emit("reappearance", this.dto, 2, this.dto.id, false);
        }
      }, 50);
    },
    //发送账单
    sendBill() {
      this.loading = true;
      setTimeout(async () => {
        let { code } = await behalf_stock(this.dto.id);
        if (code === "10000") {
          this.getTabData();
          this.IsCheckTypeCount();
          this.loading = false;
          this.visible = false;
        }
      }, 1000);
    },
    //标签下载
    async tagDownload(data) {
      if (data.productTag === "") {
        this.$message.error("请选择SKU后进行下载操作！");
      } else {
        let res = await SKU_PDF6030(
          `top=${data.productTag}&&bottom=${data.sku}`
        );
        req.exportPDF("60*30mm", res);
      }
    },
    //发货日期日期改变
    changeExpressTime(date, dateString) {
      this.dto.startTime = dateString;
    },
    //要求还柜时间
    changeCabinetTime(date, dateString) {
      this.dto.cabinetTime = dateString;
    },
    //航班日期改变
    changeFlightTime(date, dateString) {
      this.dto.deliveryTime = dateString;
    },
    //预计到仓日期改变
    changeEndTime(date, dateString) {
      this.dto.whtEndTime = dateString;
    },
    // 仓库改变
    changeWarehouse(value, option) {
      this.dto.warehousingId = value;
      this.dto.warehousingName = option.data.attrs.name;
    },
    // 清点类型改变
    changeCountingType(value, option) {
      this.dto.countingTypeId = value;
      this.dto.countingType = option.data.attrs.name;
    },
    // 入库方式改
    changeDistributionType(value, option) {
      this.dto.distributionTypeId = value;
      this.dto.distributionType = option.data.attrs.name;
    },
    // 快递方式改
    changeLogisticsName(value, option) {
      this.dto.logisticsId = value;
      this.dto.logisticsName = option.data.attrs.name;
    },
    // 发出方改变
    changeSendOut(value, option) {
      this.dto.shipperId = value;
      this.dto.shipper = option.data.attrs.name;
    },

    // 下拉框过滤
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    // 删除文件
    async delFlie() {
      let { code } = await removefile(this.dto.sinceFile.split(","));
      if (code === "10000") {
        this.logiFileList = [];
        this.dto.sinceFile = "";
      }
    },
    //获取入库方式下拉框选项
    async getSelection() {
      let res = await treeTagDictionary({
        tagType: 15,
      });
      if (res.code === "200") {
        this.express = res.responseBody;
      }
    },
    //获取发出方下拉框选项
    async getOutSelection() {
      let res = await treeTagDictionary({
        tagType: 16,
      });
      if (res.code === "200") {
        this.sendOuts = res.responseBody;
      }
    },
    //获取清点类型下拉框选项
    async getCheckSelection() {
      let res = await treeTagDictionary({
        tagType: 14,
      });
      if (res.code === "200") {
        this.checkTypes = res.responseBody;
      }
    },
    //获取sku下拉选项
    async getSkuSelection() {
      let value = await sku_select();
      if (value.code === "200") {
        this.skuList = value.responseBody;
      }
    },
    //获取发货物流名称下拉选项
    async getlogiSelection() {
      let res = await treeTagDictionary({
        tagType: 4,
      });
      if (res.code === "200") {
        this.logisSelect = res.responseBody;
      }
    },
    //关闭模态框
    cancel() {
      this.visible = false;
      setTimeout(() => {
        this.dto = {
          id: "",
          boxlist: {
            boxNo: "",
            caratNumber: "",
            highNumber: "",
            inventory: true,
            lengthNumber: "",
            packingNumber: undefined,
            pto: [],
            wideNumber: "",
          },
          cargotankNumber: "",
          createTime: "",
          isTora: "1", //是否带托
          customNo: "",
          distributionType: "",
          fbaName: "",
          //要求还柜时间
          cabinetTime: null,
          fbaNumber: "",
          hbl: "",
          hullNumber: "",
          listingFee: "",
          logisticsId: undefined,
          logisticsName: "",
          mbl: "",
          shipper: "",
          shipperId: undefined,
          distributionTypeId: undefined,
          remark: "",
          startTime: null,
          whtEndTime: null,
          trayFee: "",
          trayNumber: "",
          unloadingFee: "",
          warehousingId: undefined,
          warehousingName: "",
          feeType: "",
          sinceFile: "",
          countingType: "",
          countingTypeId: "",
        };
        this.uBTabData = [];
      }, 50);
    },
    //核重提交
    handleOk() {
      this.loading = true;
      if (this.costValue.includes("1")) {
        if (
          this.dto.trayNumber === "" ||
          this.dto.trayNumber === null ||
          this.dto.trayNumber === undefined ||
          this.dto.trayNumber <= 0
        ) {
          this.$message.error("请填写托盘数！");
          this.loading = false;
          this.$refs.trayNumber.$el.style = "border:1px solid red";
          return false;
        }
      }

      this.dataSource.forEach((item) => {
        //接收箱数
        if (item.newPackingNumber * 1 >= 1) {
          this.checkFlag = true;
        } else {
          this.checkFlag = false;
          this.loading = false;
          return false;
        }

        // 长宽高
        item.pto.forEach((v) => {
          if (
            v.skuCaratNumber != null &&
            v.skuCaratNumber * 1 != 0 &&
            v.skuCaratNumber != "" &&
            v.skuHighNumber != null &&
            v.skuHighNumber != "" &&
            v.skuHighNumber * 1 != 0 &&
            v.skuLengthNumber != "" &&
            v.skuLengthNumber != null &&
            v.skuWideNumber != "" &&
            v.skuLengthNumber * 1 != 0 &&
            v.skuWideNumber != null &&
            v.skuWideNumber * 1 != 0
          ) {
            this.checkFlag = true;
          } else {
            this.checkFlag = false;
            this.loading = false;
            return false;
          }
          // 接收数量
          if (v.newSingleBoxNumber * 1 != 0 && v.newSingleBoxNumber != null) {
            this.checkFlag = true;
          } else {
            this.checkFlag = false;
            this.loading = false;
            return false;
          }
          if (v.locationId != "" && v.locationId != null) {
            this.checkFlag = true;
          } else {
            this.checkFlag = false;
            this.loading = false;
            return false;
          }
        });
      });
      if (this.checkFlag) {
        this.dto.boxlist = this.dataSource;
        setTimeout(async () => {
          let { code } = await nuclideUpdate(this.dto);
          if (code === "10000") {
            this.getTabData();
            this.typeCount();
            this.visible = false;
            this.loading = false;
          }
        }, 1000);
      } else {
        this.$message.error("必填项缺失！请检测必填项是否完整！");
        this.loading = false;
        return false;
      }
    },
    //已接收提交
    receptionUpdate() {
      this.loading = true;
      this.dto.boxlist = this.dataSource;
      setTimeout(async () => {
        let { code } = await reception_update(this.dto);
        if (code === "10000") {
          this.loading = false;
          this.getTabData();
          this.typeCount();
          this.visible = false;
        } else {
          this.loading = false;
          return false;
        }
      }, 1000);
      // } else {

      // });
    },
  },

  computed: {
    ...mapState(["clientWareHouse"]),
  },
};
</script>

<style lang="less" scoped>
/deep/.ant-table-header-column {
  width: 100% !important;
}
.ant-form-inline .ant-form-item-with-help {
  margin: 0;
}
/deep/.columns-tab {
  width: 10% !important;
  .columns {
    display: flex;
    div {
      // width: 100px;
      text-align: center;
      border: 1px solid #e8e8e8;
    }
    div:nth-child(2) {
      border-right: 0;
      border-left: 0;
    }
    div:nth-child(4) {
      border-right: 0;
      border-left: 0;
    }
  }
}
input {
  width: 6rem;
}
.row-btn {
  font-size: 18px;
  i {
    margin: 0 5px;
    cursor: pointer;
  }
}
/deep/.box-sizes {
  width: 22px;
  display: flex;
  input {
    width: 50px;
    flex: 1;
  }
}
.pto-list {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  li {
    display: flex;
    border: 1px solid #e8e8e8;
    padding: 3px 0;
    align-items: center;
    justify-content: center;
  }
  li:nth-child(2) {
    border-right: 0;
    border-left: 0;
  }
  li:nth-child(4) {
    border-right: 0;
    border-left: 0;
  }
  .nuclide {
    span {
      padding: 3px 5px;
      width: 100%;
      background-color: #129556;
      color: #fff;
      border-radius: 5px;
    }
  }
  .nonuclide {
    span {
      padding: 3px 5px;
      width: 100%;
      background-color: #d9001b;
      color: #fff;
      border-radius: 5px;
    }
  }
}
/deep/.ant-modal-footer {
  text-align: center !important;
  button {
    margin: 0 50px;
  }
}
.logi-form {
  display: flex;
  flex-wrap: wrap;
  .ant-form-item {
    display: flex;
    width: 25%;
  }
  .upfile {
    width: 50%;
  }
}
</style>
